<template>
    <div>
        <div class="right-container">
            <div class="right-container-stage">
                <div id="sub-app">
                    <!-- <a-alert style="margin:8px 16px;text-align:left;" message="提示用的文字区域" type="info" close-text="x" /> -->
                    <a-card title="我的项目">
                    	<!-- <div class="btn_grp" slot="extra">
                    		<a-dropdown>
                    			<a-menu slot="overlay" @click="handleMenuClick">
                    				<a-menu-item key="1">
                    					1st item
                    				</a-menu-item>
                    				<a-menu-item key="2">
                    					2nd item
                    				</a-menu-item>
                    				<a-menu-item key="3">
                    					3rd item
                    				</a-menu-item>
                    			</a-menu>
                    			<a-button type="link"> 更多操作
                    				<a-icon type="down" />
                    			</a-button>
                    		</a-dropdown>
                    		<a-button shape="circle" type="link" icon="loading-3-quarters" />
                    	</div> -->
                    	<screen />
                    	<div class="card-content">
                    		<div class="my-project-head">
                    			<div style="width:70%">
                    				<a-input-search></a-input-search>
                    			</div>
                    		<!-- 	<div style="white-space: nowrap; margin-left: 16px;">
                    				<a-button type="primary" @click="showDrawer()">
                    					创建项目
                    				</a-button>
                    			</div> -->
                    		</div>
												
                    		<div class="ingi-list-table">
                    			<div class="list-table-header">
                    				<div class="th name">
                    					<div class="title">项目名称</div>
                    				</div>
                    				<div class="th period">
                    					<div class="title">执行周期</div>
                    				</div>
                    				<div class="th actions">
                    					<div class="title">操作</div>
                    				</div>
                    			</div>
                    			<div class="list-table-body">
                    				<a-skeleton :loading="loading">
                    				<a-collapse v-model="activeKey" :bordered="false" :accordion="true">
                    					<template v-for="(item,index) in data">
                    						<a-collapse-panel :key="item.id" :showArrow="false">
                    							<div slot="header" class="list-table-body-row">
                    								<div class="td name">
                    									<div class="title">{{item.name}}</div>
                    								</div>
                    								<div class="td period">
                    									{{item.cycle}}
                    								</div>
                    								<div class="td actions">
                    									<a-button-group size="small">
                    										<a-button type="link">
                    											查看
                    										</a-button>
                    										<a-button type="link">
                    											编辑
                    										</a-button>
                    									</a-button-group>
                    								</div>
                    							</div>
                    							<a-card title="Default size card" style="width: 300px">
                    								<a slot="extra" href="#">more</a>
                    								<p>card content</p>
                    								<p>card content</p>
                    								<p>card content</p>
                    							</a-card>
                    						</a-collapse-panel>
                    					</template>
                    				</a-collapse>
                    				</a-skeleton>
                    			</div>
                    			<div class="list-table-footer"></div>
                    		</div>
                    
                    
                    		<a-pagination v-model="listQurey.page" :total="total" show-less-items />
                    		<!-- <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns"
                                                     :data-source="data">
                                                        <span slot="action" slot-scope="text, record">
                                                            <a-button size="small" style="margin-right: 10px;" type="primary">
                                                                审核
                                                            </a-button>
                                                            <a-button size="small" style="margin-right: 10px;" type="danger">
                                                                删除
                                                            </a-button>
                                                            <a-button @click="isView=true" size="small" style="margin-right: 10px;" type="default">
                                                                查看
                                                            </a-button>
                                                        </span>
                                                    </a-table> -->
                    	</div>
                    </a-card>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
	import Vue from 'vue'
	import {
		projectList,
		getSupervisor,
		getAdministration,
		createProject,
		getProjectByRole
	} from '@/api/list.js'
	import screen from '../../../components/screen'
    export default {
			components: {
				screen
			},
        data(){
            return {
							loading: true,
							data:[],
							activeKey: [],
							listQurey: {
								page: 1,
								size: 10
							},
							total: 0,
            };
        },
        created() {
					this.getProject();
        },
				methods:{
					getProject() {
						if (localStorage.getItem('roleId') === '46') {
							projectList(this.listQurey)
								.then(res => {
									this.loading=false;
									this.data = res.data.records;
									this.total = res.data.total;
								})
						} else {
							// 非机构管理员时
							const parameter = {
								id: JSON.parse(localStorage.getItem('user')).id,
								roleId: localStorage.getItem('roleId')
							};
							getProjectByRole(parameter)
								.then(res => {
									this.loading=false;
									this.data = res.data;
									this.total = res.data.length;
									if (res.data.length === 0) {
										this.$notification.error({
											message: '无关联的项目',
											description: `您当前登录的角色没有关联的项目`
										})
									}
								})
					
						}
					
					},
				},
    }
</script>

<style scoped>

</style>